
<template>
  <div class="view-container">
    <div class="app-title-container title-position">
      <modules-title title-name="需求管理">
        <template slot="btn">
          <el-button
            v-hasPermi="{ v: ['demand:require:add'], isF: true }"
            type="primary"
            @click="createRequirements"
          >创建新需求</el-button>
        </template>
      </modules-title>
    </div>
    <div class="main-content-container">
      <div class="app-main-container">
        <el-form
          v-show="showSearch"
          ref="queryForm"
          class="filter-form"
          :model="queryParams"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="" style="margin-right: 40px">
            <el-select
              v-model="queryParams.select_type"
              placeholder="请选择"
              size="small"
              @change="selectChange"
            >
              <el-option
                v-for="fr in categoryOption"
                :key="fr.id"
                :label="fr.label"
                :value="fr.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="需求状态" style="margin-right: 40px">
            <el-select
              v-model="queryParams.demand_status"
              placeholder="请选择状态"
              size="small"
              @change="selectChange"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.label"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目类型" style="margin-right: 40px">
            <el-select
              v-model="queryParams.project_type"
              placeholder="请选择项目类型"
              size="small"
              clearable
              @change="selectChange"
            >
              <el-option
                v-for="type in projectTypeOption"
                :key="type.id"
                :label="type.dict_val"
                :value="type.dict_val"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="需求来源" style="margin-right: 40px">
            <el-select
              v-model="queryParams.demand_source"
              placeholder="请选择需求来源"
              size="small"
              clearable
              @change="selectChange"
            >
              <el-option
                v-for="fr in projectFromOption"
                :key="fr.id"
                :label="fr.dict_val"
                :value="fr.dict_val"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="关键字" style="margin-right: 40px">
            <el-input
              v-model="queryParams.select_str"
              clearable
              placeholder="请输入编号或项目名称"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              @click="handleQuery"
            >搜索
            </el-button>
            <el-button
              plain
              size="small"
              @click="resetQuery"
            >重置</el-button>
          </el-form-item>
        </el-form>
        <el-table
          border
          header-cell-class-name="header-cell"
          size="medium"
          :data="tableList"
          :cell-style="tableCellStyle"
          row-key="id"
          @row-click="tableRowClick"
        >
          <el-table-column
            label="需求编号"
            align="center"
            prop="demand_no"
            width="130"
          />
          <el-table-column
            label="项目名称"
            align="left"
            header-align="center"
            prop="project_name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="项目类型"
            align="center"
            prop="project_type"
          />
          <el-table-column
            label="需求来源"
            align="center"
            prop="demand_source"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="优先级"
            align="center"
            prop="priority"
            width="100"
          >
            <template slot-scope="scope">
              <div>
                <p
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                  :class="[
                    scope.row.priority_id == '1' ? 'status-color1' : '',
                    scope.row.priority_id == '2' ? 'status-color3' : '',
                    scope.row.priority_id == '3' ? 'status-color8' : '',
                  ]"
                >
                  <i class="icon el-icon-top" /><span>{{
                    scope.row.priority
                  }}</span>
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="创建人"
            align="center"
            prop="creator_name"
            width="120"
          />
          <el-table-column
            label="创建时间"
            align="center"
            prop="created_at"
            width="160"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.created_at }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
            prop="demand_status"
            width="100"
          >
            <template slot-scope="scope">
              <div>
                <p v-if="scope.row.demand_status == 0" class="status-common">
                  草稿
                </p>
                <p
                  v-else-if="scope.row.demand_status == 1"
                  class="status-common"
                >
                  审核中
                </p>
                <p
                  v-else-if="scope.row.demand_status == 2"
                  class="status-common"
                >
                  审核不通过
                </p>
                <p
                  v-else-if="scope.row.demand_status == 3"
                  class="status-common"
                >
                  待评估
                </p>
                <p
                  v-else-if="scope.row.demand_status == 4"
                  class="status-common"
                >
                  已否决
                </p>
                <p
                  v-else-if="scope.row.demand_status == 5"
                  class="status-common"
                >
                  暂时搁置
                </p>
                <p
                  v-else-if="scope.row.demand_status == 6"
                  class="status-common"
                >
                  通过采纳
                </p>
                <p
                  v-else-if="scope.row.demand_status == 7"
                  class="status-common"
                >
                  已提交立项
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="left"
            header-align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.demand_status == 0"
                size="medium"
                type="text"
                @click="handleUpdate(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="scope.row.demand_status == 0"
                class="$status-color4"
                size="medium"
                type="text"
                @click="handleSubmitAudit(scope.row)"
              >
                提交评估</el-button>
              <el-button
                v-hasPermi="{
                  v: ['demand:require:audit'],
                  isF: scope.row.demand_status == 1,
                }"
                class="$status-color4"
                size="medium"
                type="text"
                @click="handleAudit(scope.row)"
              >
                审批</el-button>
              <el-button
                v-hasPermi="{
                  v: ['demand:require:evaluate'],
                  isF: scope.row.demand_status == 3,
                }"
                class="$status-color4"
                size="medium"
                type="text"
                @click="evaluateRequirements(scope.row)"
              >评估需求</el-button>
              <el-button
                v-hasPermi="{
                  v: ['demand:require:evaluate'],
                  isF: scope.row.demand_status == 5,
                }"
                class="$status-color4"
                size="medium"
                type="text"
                @click="reappraise(scope.row)"
              >
                重新评估
              </el-button>
              <el-button
                v-hasPermi="{
                  v: ['demand:project:add'],
                  isF: scope.row.demand_status == 6,
                }"
                class="$status-color4"
                size="medium"
                type="text"
                @click="createProject(scope.row)"
              >
                创建自研立项</el-button>
              <!-- <el-button
                v-hasPermi="{ v: ['demand:require:detail'], isF: true }"
                class="text-btn-yellow"
                size="medium"
                type="text"
                icon="el-icon-view"
                @click="details(scope.row)"
              >
                详情</el-button> -->
              <el-button
                v-if="scope.row.demand_status == 0"
                class="text-btn-red"
                size="medium"
                type="text"
                @click="handleDelete(scope.row)"
              >
                删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          style="display: flex; justify-content: flex-end"
          :total="total"
          :page.sync="queryParams.pager.skip"
          :limit.sync="queryParams.pager.limit"
          @pagination="afreshList"
        />
      </div>
      <!-- 需求审批 -->
      <audit-dialog
        ref="auditDialog"
        :require-id="currentId"
        @auditSuccess="auditSuccess"
      />
      <!-- 需求评估 -->
      <evaluate-dialog
        ref="evaluateDialog"
        :require-id="currentId"
        :evaluate-type="evaluateType"
        @evaluateSuccess="evaluateSuccess"
      />
    </div>
  </div>
</template>
<script>
import { requirementList, submitAudit, deleteRequire } from '@/api/requirement'
export default {
  name: 'RequirementsManagement',
  components: {
    AuditDialog: () => import('../modules/auditDialog'),
    EvaluateDialog: () => import('../modules/evaluateDialog.vue')
  },
  data() {
    return {
      currentId: '',
      evaluateType: 1,
      // 遮罩层
      showSearch: true,
      // 总条数
      total: 0,
      // 流程审批测试表格数据
      tableList: [],
      // $comment字典
      statusOptions: [
        { id: 1, value: -1, label: '全部' },
        { id: 2, value: 0, label: '草稿' },
        // { id: 3, value: 1, label: '审核中' },
        // { id: 4, value: 2, label: '审核不通过' },
        { id: 5, value: 3, label: '待评估' },
        { id: 6, value: 4, label: '已否决' },
        { id: 7, value: 5, label: '暂时搁置' },
        { id: 8, value: 6, label: '通过采纳' },
        { id: 9, value: 7, label: '已提交立项' }
      ],
      categoryOption: [
        { id: 1, value: 0, label: '全部需求' },
        { id: 2, value: 1, label: '我创建的' },
        { id: 3, value: 2, label: '我评估的' }
      ],
      // 项目类别
      projectTypeOption: [],
      // 项目来源
      projectFromOption: [],
      // 查询参数
      queryParams: {
        demand_status: -1,
        project_type: '',
        demand_source: '',
        select_type: 0,
        select_str: '',
        pager: {
          limit: 10,
          skip: 1
        }
      },
      // 表单参数
      evaluateForm: {
        result: '',
        remark: ''
      },
      evaluateOptions: [
        {
          label: '通过',
          value: 1
        },
        {
          label: '拒绝',
          value: 2
        },
        {
          label: '暂时搁置',
          value: 3
        }
      ],
      // 表单校验
      rules: {
        status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]
      },
      // 弹框
      evaluateRules: {
        result: [
          { required: true, message: '请选择评估结论', trigger: 'blur' }
        ],
        remark: []
      }
    }
  },
  // 返回后是否刷新列表
  beforeRouteEnter(to, from, next) {
    console.log(to, from, next)
    to.params.refresh = from.params.refresh

    next()
  },
  activated: function() {
    if (this.$route.params.refresh) {
      this.getList()
    }
  },
  created() {
    this.getList()
    this.getSysAllDic()
  },
  methods: {
    tableRowClick(row, column, event) {
      if (column.label === '操作') return
      this.$router.push({
        name: 'requirementDetail',
        query: {
          requireId: row.id
        }
      })
    },
    tableCellStyle(row) {
      if (row.column.label === '操作') {
        return
      } else {
        return 'cursor: pointer'
      }
    },
    // 创建需求
    createRequirements() {
      this.$router.push({
        name: 'createRequirements',
        query: {
          types: 1
        }
      })
    },
    details(row) {
      this.$router.push({
        name: 'requirementDetail',
        query: {
          requireId: row.id
        }
      })
    },
    getSysAllDic() {
      let allDic = this.$store.getters.sysDic()
      if (!allDic) {
        this.$store.dispatch('sys/getSysAllDic').then((data) => {
          allDic = data
        })
      }
      this.projectFromOption = allDic['demand_source']
      this.projectTypeOption = allDic['project_type']
    },
    afreshList() {
      this.getList()
    },
    /** 查询流程审批测试列表 */
    getList() {
      requirementList(this.queryParams).then((res) => {
        this.tableList = res.data.data
        this.total = res.data.total
      })
    },
    // 表单重置
    reset() {
      this.queryParams = {
        demand_status: -1,
        project_type: '',
        demand_source: '',
        select_type: 0,
        select_str: '',
        pager: {
          limit: 10,
          skip: 1
        }
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.reset()
      this.getList()
    },
    selectChange() {
      this.queryParams.pager.skip = 1
      this.getList()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$router.push({
        name: 'createRequirements',
        query: {
          types: 2,
          requireId: row.id
        }
      })
    },
    handleAudit(row) {
      this.currentId = row.id
      this.$refs.auditDialog.open()
    },
    auditSuccess() {
      this.currentId = ''
      this.getList()
    },
    // 评估需求
    evaluateRequirements(row) {
      this.currentId = row.id
      this.evaluateType = 1
      this.$refs.evaluateDialog.open()
    },
    // 重新评估
    reappraise(row) {
      this.currentId = row.id
      this.evaluateType = 2
      this.$refs.evaluateDialog.open()
    },
    evaluateSuccess() {
      this.currentId = ''
      this.getList()
    },
    // 创建立项申请
    createProject(row) {
      this.$router.push({
        name: 'reqCreateEdit',
        query: {
          types: 1,
          requireId: row.id
        }
      })
    },
    // 草稿提交审核
    handleSubmitAudit(row) {
      submitAudit(row.id).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '提交成功'
          })
          this.getList()
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },
    deleteOperation(id) {
      const that = this
      deleteRequire({ id: id }).then((res) => {
        if (res.code === 200) {
          if (
            that.total > that.tableList.length &&
            that.tableList.length === 1
          ) {
            that.queryParams.pager.skip = that.queryParams.pager.skip - 1
          }
          this.getList()
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const that = this
      this.$confirm('是否确认删除该需求?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          that.deleteOperation(row.id)
        })
        .catch(function() {})
    }
  } // methods结束
}
</script>

<style lang="scss" scoped>
.view-container {
  padding-top: 110px;
  .filter-form {
    ::v-deep .el-input {
      width: 180px;
    }
  }
}
</style>
